<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// 导入图标工具
import { Edit, Delete, Plus } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

const router = useRouter();

// 模拟职位数据
const jobs = ref([
    { id: 1, title: "前端开发工程师", type: "全职", count: 5, status: "招聘中", date: "2025-05-10" },
    { id: 2, title: "UI设计师", type: "兼职", count: 2, status: "已暂停", date: "2025-05-05" },
    { id: 3, title: "Java后端开发", type: "全职", count: 3, status: "招聘中", date: "2025-05-01" },
]);

const handleCreate = () => {
    router.push({
        path: "/company/jobForm",
    });
};

const handleEdit = (id: number) => {
    router.push({
        path: "/company/jobForm",
        query: { id },
    });
};

const handleDelete = (id: number) => {
    message
        .confirm("确定要删除该职位吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            console.log("删除职位:", id);
            message.success("删除成功");
        })
        .catch(() => {});
};
</script>

<template>
    <div class="job-list-container">
        <div class="header">
            <h2>职位管理</h2>
            <el-button type="primary" :icon="Plus" @click="handleCreate"> 发布新职位 </el-button>
        </div>

        <el-table :data="jobs" style="width: 100%">
            <el-table-column prop="title" label="职位名称" width="180" />
            <el-table-column prop="type" label="职位类型" width="100" />
            <el-table-column prop="count" label="招聘人数" width="100" />
            <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag :type="row.status === '招聘中' ? 'success' : 'info'">
                        {{ row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="发布日期" width="120" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button size="small" :icon="Edit" @click="handleEdit(row.id)"> 编辑 </el-button>
                    <el-button size="small" :icon="Delete" type="danger" @click="handleDelete(row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.job-list-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.el-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-button {
    margin-left: 10px;
}
</style>
